<template>
  <!--序列号列表信息-->
  <div id="InSerialNumberInformationList">
    <v-table
        :checked="false"
        :pageSize="pageSize"
        :page="page"
        :searchFlag="false"
        :tableConfig="tableConfig"
        :tableData="tableData"
        :total="total"
        @setdialog="setdialog" v-if="!isShow"
    ></v-table>
    <!-- 明细表 -->
    <div id="SerialNumberInformation" v-if="isShow">
      <v-tableTitle :btnConfig="btnConfig" @cancel="cancel"></v-tableTitle>
      <g-details :detailData="detailInfo" :rules="rules" :inputConfig="inputConfig" ref="input"></g-details>
    </div>
  </div>
</template>

<script>
import table from 'commons/Table'
import tableTitle from "commons/TableTitle"
import baseMixin from "@/mixins/BaseMixin";
import {
  queryInfoById,
  queryInInfoByOrderNo,
  queryOutInfoById,
  queryOutInfoByOrderNo
} from "@/api/serialNumber/serialNumber";

export default {
  name: "InSerialNumberInformationList",
  mixins: [baseMixin],
  props: {
    data: {
      type: Object
    }
  },
  data() {
    return {
      inputConfig: [
        {
          type: "input",
          label: this.$t('in.lineNum'),
          disabled: true,
          props: "lineNum"
        },
        {
          type: "input",
          label: this.$t('in.palletNo'),
          disabled: true,
          props: "palletNo"
        },
        {
          type: "input",
          label: this.$t('in.Lot'),
          disabled: true,
          props: "lot"
        },
        {
          type: "input",
          label: this.$t('in.nameOfOwner'),
          disabled: true,
          props: "storerName",
          break:true
        },
        //  第一行结束
        {
          type: "input",
          label: this.$t('in.caseNo'),
          disabled: true,
          props: "caseNo"
        },
        {
          type: "select",
          label: this.$t('in.packUnit'),
          disabled: true,
          props: "packUnit",
          options: this.getOptions("codelkup/INCOTERMS")
        },
        {
          type: "input",
          label: this.$t('in.scanUserName'),
          disabled: true,
          props: "scanUserName"
        },
        /**
         * 扫描时间
         */
        {
          type: "date",
          label: this.$t('in.scanDatetime'),
          disabled: true,
          props: "scanDatetime"
        },
        {
          type: "select",
          label: this.$t('in.scanType'),
          disabled: true,
          props: "scanType",
          options: this.getOptions("codelkup/SernumScanType"),
          break:true
        },
        //  第二行结束

        {
          type: "input",
          label: this.$t('in.serialNumber'),
          disabled: true,
          props: "serialNumber"
        },
        {
          type: "input",
          label: this.$t('in.serialNumberUnit'),
          disabled: true,
          props: "serialNumberUnit"
        },
        {
          type: "input",
          label: this.$t('in.expectWeight'),
          disabled: false,
          props: "expectWeight"
        },
        {
          type: "input",
          label: this.$t('in.receiptWeight'),
          disabled: false,
          props: "receiptWeight",
          break:true
        }
        // 第三行结束
      ],
      tableConfig: [
        {label: this.$t('in.lineNum'), prop: "lineNum"},
        {label: this.$t('in.nameOfOwner'), prop: "storerName"},
        {label: this.$t('in.Lot'), prop: "lot"},
        {label: this.$t('in.sku'), prop: "sku"},
        {label: this.$t('in.descr'), prop: "descr"},
        {label: this.$t('in.serialNumber'), prop: "serialNumber"},
        {label: this.$t('in.palletNo'), prop: "palletNo"},
        {label: this.$t('in.caseNo'), prop: "caseNo"},
        {label: this.$t('in.packUnit'), prop: "packUnit"},
        {label: this.$t('in.scanType'), prop: "scanType", options: this.getOptions("codelkup/SernumScanType"), input: "select"},
        {label: this.$t('in.scanUserName'), prop: "scanUserName"},
        {label: this.$t('in.scanDatetime'), prop: "scanDatetime"},
        {label: this.$t('in.expectWeight'), prop: "expectWeight"},
        {label: this.$t('in.receiptWeight'), prop: "receiptWeight"},
        {label: this.$t('in.weightUnit'), prop: "weightUnit"},
        {label: this.$t('in.LotTable01'), prop: "LotTable01"},
        {label: this.$t('in.LotTable02'), prop: "LotTable02"},
        {label: this.$t('in.LotTable03'), prop: "LotTable03"}
      ],
      tableData: [],
      rules: {
        serialNumber: [
          { required: true, message: this.$t('in.serialNumberNotNull'), trigger: "blur" }
        ],
        serialNumberUnit: [
          { required: true, message: this.$t('in.serialNumberUnitNotNull'), trigger: "blur" }
        ]
      },
      pageSize: 10,
      page: 1,
      total: 10,
      detailData: {},
      navDetail: 0,
      detailInfo: undefined,
      isShow: false
    }
  },
  methods: {
    cancel() {
      this.isShow = !this.isShow;
      this.detailInfo = undefined;
    },
    setdialog(data) {

      queryInfoById(data.id).then(res => {
          this.detailInfo = res.data;
          this.isShow = true;
        
      });
    },
    queryMultipleInfoByOrderNo(receiptKey, lineNum) {

      // ASN收货单 - 13201 出库单 - 13202
      let data = {
        "orderNo": receiptKey,
        "lineNum": lineNum,
        "orderType": 13201,
        "pageSize": this.pageSize
      };

      queryInInfoByOrderNo(data).then(res => {

        // ASN收货单 - 13201
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.pageSize = res.pageSize;
          this.page = res.pageNum;
        
      });
    }
  },
  mounted() {
    this.queryMultipleInfoByOrderNo(this.data.detailData.receiptkey, this.data.detailData.receiptlinenumber);
  },
  computed: {
    btnConfig() {
      return [
        {label: this.$t('common.return'), invalid: "cancel"}
      ]
    }
  },
  watch: {},
  components: {
    'v-table': table,
    "v-tableTitle": tableTitle
  }
}
</script>

<style scoped>

</style>
